<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-09-20 16:39:58
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-09-20 16:40:05
 * @FilePath: \v9\src\components\Icon.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="icon-wrapper">
    <svg class="icon" aria-hidden="true">
      <use :xlink:href="iconName"></use>
    </svg>
  </div>
</template>
 
<script>
// 引入从iconfont 下载的symbox文件
import "@/assets/icons/iconfont-svg.js";
// 引入本地的svg文件
// 定义一个加载目录的函数
const requireAll = (requireContext) =>
  requireContext.keys().map(requireContext);
const req = require.context("@/assets/icons/svg", false, /\.svg$/);
// 加载目录下的所有的 svg 文件
requireAll(req);

export default {
  name: "Icon",
  props: {
    name: String,
    prefix: {
      type: String,
      default: "icon-",
    },
  },
  computed: {
    iconName() {
      return `#${this.prefix}${this.name}`;
    },
  },
};
</script>
 
<style lang="scss" scoped>
.icon-wrapper {
  display: inline-block;
}
.icon {
  width: 100%;
  height: 100%;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>